<html>
<head>
    <meta charset="utf-8">
    <title>{ms:global.name/}</title>
    <#include "head-file.htm" />
    <!--引入vue库-->
    <script type="text/javascript" src="/static/plugins/vue/2.6.9/vue.min.js"></script>
    <!--引入element-ui库-->

    <script src="${base}/static/plugins/element-ui/2.15.8/index.min.js"></script>
    <link rel="stylesheet" href="/static/plugins/element-ui/2.15.8/theme-chalk/index.min.css">

    <!--网络请求框架-->
    <script src="/static/plugins/axios/0.18.0/axios.min.js"></script>
    <script src="/static/plugins/qs/6.6.0/qs.min.js"></script>
    <script src="/static/plugins/ms/2.0/ms.umd.js"></script>
    <script src="/static/plugins/ms/2.0/ms-el-form.umd.js"></script>
    <script>
        window.ms.login="{ms:global.host/}mdiyPage/login.do";
    </script>
</head>

<body>

<div id="app" v-cloak>
    <!--表单 - start -->
    <template v-if="flag">
        <el-form ref="form1" :model="form" :rules="rules" label-position="right" size="large"
                 label-width="120px">
            <el-form-item prop="peoplePhone" label="手机号">
                <el-input v-model="form.peoplePhone" placeholder="请输入手机号">
                </el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="rand_code" >
                <el-input
                        v-model="form.rand_code"
                        :disabled="false"
                        :readonly="false"
                        :clearable="true"
                        placeholder="请输入验证码">
                </el-input>
                <div >
                    <img :src="verifCode" @click="code"/>
                    <div @click="code">
                        看不清？换一张
                    </div>
                </div>
            </el-form-item>
            <el-form-item prop="peopleCode" label="短信验证码" >
                <el-input v-model="form.peopleCode" placeholder="请输入6位验证码">
                </el-input>
                <el-button v-text="sendPeopleCodeMsg" :disabled="sendPeopleCodeDisabled" type="info" plain
                           @click="getPeopleCode"
                >
                </el-button>
            </el-form-item>
            <el-form-item label=" " >
                <el-button @click="verifierMail" type="primary" :loading="mailLoading">
                    下一步
                </el-button>
            </el-form-item>
        </el-form>
    </template>
    <template v-else>
        <el-form ref="form2" :model="form" :rules="rules" label-position="right" size="large"
                 label-width="120px">
            <el-form-item prop="newPeoplePassword" label="新密码">
                <el-input type="password" v-model="form.newPeoplePassword" placeholder="请输入新密码">
                </el-input>
            </el-form-item>
            <el-form-item prop="rePeoplePassword" label="确认新密码" >
                <el-input type="password" v-model="form.rePeoplePassword" placeholder="请再次输入新密码">
                </el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="rand_code">
                <el-input
                        v-model="form.rand_code"
                        :disabled="false"
                        :readonly="false"
                        :clearable="true"
                        placeholder="请输入验证码">
                </el-input>
                <div>
                    <img :src="verifCode" @click="code"/>
                    <div @click="code" >
                        看不清？换一张
                    </div>
                </div>
            </el-form-item>
            <el-form-item label=" " >
                <el-button @click="resetPassword" type="primary"
                           :loading="resetLoading">
                    确定
                </el-button>
            </el-form-item>
        </el-form>
    </template>
    <!--表单 - end -->
</div>
</body>
</html>
<script>
    var validatePass = function (rule, value, callback) {
        if (value !== app.form.newPeoplePassword) {
            callback(new Error('两次输入密码不一致!'));
        } else {
            callback();
        }
    };
    var app = new Vue({
        el: '#app',
        watch: {},
        data: {
            //重置按钮loading
            resetLoading: false,
            //下一步（校验手机号）按钮loading
            mailLoading: false,
            verifCode: ms.base + "/code",
            flag: true,
            form: {
                peoplePhone: "",
                newPeoplePassword: "",
                rePeoplePassword: "",
                peopleCode: "",
                rand_code: "",
            },
            countdown: 0,
            sendPeopleCodeDisabled: false,
            sendPeopleCodeMsg: "发送验证码",
            rules: {
                peoplePhone: [{
                    required: true,
                    message: '手机号不能为空',
                    trigger: 'blur'
                }, {"pattern": /^1[34578]\d{9}$/, "message": "手机号格式不匹配"}, {
                    "min": 11,
                    "max": 11,
                    "message": "手机号长度必须为11位"
                }
                ],
                newPeoplePassword: [{
                    required: true,
                    message: '密码不能为空',
                    trigger: 'blur'
                },
                    {
                        min: 6,
                        max: 20,
                        message: '长度在 6 到 20 个字符',
                        trigger: 'blur'
                    }
                ],
                rePeoplePassword: [{
                    required: true,
                    message: '密码不能为空',
                    trigger: 'blur'
                },
                    {
                        min: 6,
                        max: 20,
                        message: '长度在 6 到 20 个字符',
                        trigger: 'blur'
                    },
                    {
                        validator: validatePass,
                        trigger: 'blur'
                    }
                ],

                peopleCode: [
                    {
                        required: true,
                        message: '验证码不能为空',
                        trigger: 'blur'
                    },
                    {
                        min: 6,
                        max: 6,
                        message: '请输入6位验证码',
                        trigger: 'blur'
                    },
                ],
                rand_code: [{
                    required: true,
                    message: '验证码不能为空',
                    trigger: 'blur'
                },
                    {
                        min: 4,
                        max: 4,
                        message: '请输入4位验证码',
                        trigger: 'blur'
                    },
                ],
            },
        },
        methods: {
            //校验验证码
            verifierMail: function () {
                var that = this;
                that.$refs.form1.validate(function (valid) {
                    //验证
                    if (valid) {
                        ms.http.post('/checkResetPasswordCode.do', {
                            peopleCode: that.form.peopleCode,
                            rand_code: that.form.rand_code,
                        }).then(function (data) {
                            if (data.result) {
                                that.flag = false;
                                that.code();
                                that.form.rand_code = "";
                            } else {
                                that.$notify({
                                    title: '失败',
                                    message: data.msg,
                                    type: 'warning'
                                });
                            }
                        })

                    }
                });
            },
            //重置密码
            resetPassword: function () {
                var that = this;
                that.$refs.form2.validate(function (valid) {
                    if (valid) {
                        that.rssetPwd();
                    }
                });
            },
            getPeopleCode: function () {
                var that = this;
                if (that.countdown > 0) {
                    return;
                }
                var flag = true;
                that.$refs['form1'].validateField(['rand_code', 'peoplePhone'], (Error) => {
                    if (Error) {
                        //执行
                        flag = false;
                    }
                });
                if (!flag) {
                    return;
                }

                ms.http.post("/isExists.do", {
                    peoplePhone: that.form.peoplePhone,
                }).then(function (data) {
                    if (!data.result) {
                        that.$notify({
                            title: '失败',
                            message: '该手机号未注册',
                            type: 'warning'
                        });
                    } else {
                        // 发送手机验证码
                        ms.http.post('/sendCode.do', {
                            receive: that.form.peoplePhone,
                            modelCode: "bindPhone",
                            type: "sms",
                            rand_code: that.form.rand_code,
                        }).then(function (data) {
                            if (data.result) {
                                that.$notify({
                                    title: '成功',
                                    message: '验证码已发出，请注意查收！',
                                    type: 'success'
                                });

                                that.countdown = 60;
                                that.countdownSubtract();
                                that.sendPeopleCodeDisabled = true;
                            } else {
                                if (data.msg) {
                                    that.$notify({
                                        title: '失败',
                                        message: data.msg,
                                        type: 'warning'
                                    });
                                }
                            }
                        })

                    }
                });
            },
            code: function () {
                this.verifCode = ms.base + "/code?t=" + (new Date).getTime();
            },
            rssetPwd: function () {
                var that = this;
                ms.http.post('/resetPassword.do', {
                    peopleCode: that.form.peopleCode,
                    rand_code: that.form.rand_code,
                    peoplePassword: that.form.newPeoplePassword
                }).then(function (data) {
                    if (data.result) {
                        that.$notify({
                            title: '成功',
                            message: '密码重置成功',
                            type: 'success'
                        });
                        window.location.href = "/mdiyPage/login.do";
                    } else {
                        that.$notify({
                            title: '失败',
                            message: data.msg,
                            type: 'warning'
                        });
                    }
                })
            },
            countdownSubtract: function () {
                this.countdown--;
                this.sendPeopleCodeMsg = "重新发送(" + this.countdown + ")";
                if (this.countdown == 0) {
                    this.sendPeopleCodeMsg = "发送验证码";
                    this.sendPeopleCodeDisabled = false;
                    return;
                }
                setTimeout(this.countdownSubtract, 1000);
            }
        },
        created: function () {
            this.code();
        },
    })
</script>